<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('系统分析')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                流程名称：<input type="text" name="name">
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>折线图</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="#">选项1</a>
                                        </li>
                                        <li><a href="#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-line-chart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>柱状图</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="#">选项1</a>
                                        </li>
                                        <li><a href="#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-bar-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            <div class="btn-group-sm" id="toolbar" role="group">-->
<!--                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:management:export">-->
<!--                    <i class="fa fa-download"></i> 导出-->
<!--                </a>-->
<!--            </div>-->

<!--            <div class="col-sm-12 search-collapse" style="height: 80%">-->
<!--                <div class="btn-group-sm" id="toolbar" role="group">-->
<!--                    <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:analysis:export">-->
<!--                        <i class="fa fa-download"></i> 导出-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
        </div>



     </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: echarts-js" />
     <script th:inline="javascript">
         var dom = document.getElementById("echarts-bar-chart");
         var myChart = echarts.init(dom);
         var app = {};
         option = null;
         option = {
             tooltip: {
                 trigger: 'item',
                 formatter: '{a} <br/>{b}: {c} ({d}%)'
             },
             legend: {


                 orient: 'vertical',
                 left: 10,
                 data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
             },
             series: [
                 {
                     name: '访问来源',
                     type: 'pie',
                     selectedMode: 'single',
                     radius: [0, '30%'],

                     label: {
                         position: 'inner'
                     },
                     labelLine: {
                         show: false
                     },
                     data: [
                         {value: 335, name: '直达', selected: true},
                         {value: 679, name: '营销广告'},
                         {value: 1548, name: '搜索引擎'}
                     ]
                 },
                 {
                     name: '访问来源',
                     type: 'pie',
                     radius: ['40%', '55%'],
                     label: {
                         formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                         backgroundColor: '#eee',
                         borderColor: '#aaa',
                         borderWidth: 1,
                         borderRadius: 4,
                         // shadowBlur:3,
                         // shadowOffsetX: 2,
                         // shadowOffsetY: 2,
                         // shadowColor: '#999',
                         // padding: [0, 7],
                         rich: {
                             a: {
                                 color: '#999',
                                 lineHeight: 22,
                                 align: 'center'
                             },
                             // abg: {
                             //     backgroundColor: '#333',
                             //     width: '100%',
                             //     align: 'right',
                             //     height: 22,
                             //     borderRadius: [4, 4, 0, 0]
                             // },
                             hr: {
                                 borderColor: '#aaa',
                                 width: '100%',
                                 borderWidth: 0.5,
                                 height: 0
                             },
                             b: {
                                 fontSize: 16,
                                 lineHeight: 33
                             },
                             per: {
                                 color: '#eee',
                                 backgroundColor: '#334455',
                                 padding: [2, 4],
                                 borderRadius: 2
                             }
                         }
                     },
                     data: [
                         {value: 335, name: '直达'},
                         {value: 310, name: '邮件营销'},
                         {value: 234, name: '联盟广告'},
                         {value: 135, name: '视频广告'},
                         {value: 1048, name: '百度'},
                         {value: 251, name: '谷歌'},
                         {value: 147, name: '必应'},
                         {value: 102, name: '其他'}
                     ]
                 }
             ]
         };;
         if (option && typeof option === "object") {
             myChart.setOption(option, true);
         }
     </script>
<!--    <script th:inline="javascript">-->
<!--        var prefix = ctx + "flow/monitor";-->
<!--        var analysisPrefix = ctx + "project/analysis";-->
<!--        function suspend(processInstanceId) {-->
<!--            $.operate.get(prefix+"/suspend/"+processInstanceId, function (){-->
<!--                $.modal.alert("挂起成功");-->
<!--            });-->
<!--        }-->

<!--        function run(processInstanceId) {-->
<!--            $.operate.get(prefix+"/run/"+processInstanceId, function (){-->
<!--                $.modal.alert("唤醒成功");-->
<!--            });-->
<!--        }-->

<!--        $(function() {-->
<!--            var options = {-->
<!--                code: "executionId",-->
<!--                parentCode: "parentExecutionId",-->
<!--                uniqueId: "executionId",-->
<!--                id: "process",-->
<!--                url: prefix + "/listExecutions",-->
<!--                exportUrl: analysisPrefix + "/export",-->
<!--                modalName: "运行中的流程实例",-->
<!--                columns: [-->
<!--                {-->
<!--                    field: 'selectItem',-->
<!--                    radio: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'executionId',-->
<!--                    title: '执行实例编号',-->
<!--                    visible: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'name',-->
<!--                    title: '流程名称'-->
<!--                },-->
<!--                {-->
<!--                    field: 'currentTask',-->
<!--                    title: '当前节点'-->
<!--                },-->
<!--                {-->
<!--                    field: 'active',-->
<!--                    title: '是否激活',-->
<!--                    formatter: function(value, item, index) {-->
<!--                         if (item.active == true)-->
<!--                             return '是';-->
<!--                         else-->
<!--                             return '否';-->
<!--                     }-->
<!--                },-->
<!--                {-->
<!--                    field: 'suspended',-->
<!--                    title: '是否挂起',-->
<!--                    formatter: function(value, item, index) {-->
<!--                        if (item.suspended == true)-->
<!--                        return '是';-->
<!--                        else-->
<!--                        return '否';-->
<!--                    }-->
<!--                },-->
<!--                {-->
<!--                    field: 'startTime',-->
<!--                    title: '开始时间'-->
<!--                },-->
<!--                {-->
<!--                    field: 'startUserId',-->
<!--                    title: '发起人'-->
<!--                }]-->
<!--            };-->
<!--            $.treeTable.init(options);-->
<!--        });-->
<!--    </script>-->
</body>
</html>